<template>
  <div class="depart-container">
    <el-card>
      <!-- 标题 -->
      <el-row>
        <el-col :span="20">江苏传智播客教育科技股份有限公司</el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">负责人</el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="addDep('')"
                    >添加部门</el-dropdown-item
                  >
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 标题 -->
      <!-- 列表 -->
      <el-tree
        :data="tableData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <el-row slot-scope="{ data }">
          <el-col :span="20">
            {{ data.name }}
            <!-- <pre>{{ data }}</pre> -->
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addDep(data.id)"
                      >添加部门</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="editDia(data)"
                      >编辑部门</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="delDep(data.id)"
                      >删除部门</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tree>
      <!-- 列表 -->
    </el-card>
    <!-- 添加部门对话框 -->
    <el-dialog
      :title="isEdit ? '编辑部门' : '添加部门'"
      :visible.sync="dialogFormVisible"
    >
      <depDia
        v-if="dialogFormVisible"
        :pid="pid"
        :row="row"
        :dialogFormVisible.sync="dialogFormVisible"
        @handleDia="handleDia"
        :isEdit="isEdit"
      ></depDia>
    </el-dialog>
    <!-- <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        :model="form"
        ref="diaForm"
        style="padding: 20px 50px"
      >
        <el-form-item
          label="部门名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="部门编码"
          :label-width="formLabelWidth"
          prop="code"
        >
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="部门负责人"
          :label-width="formLabelWidth"
          prop="manager"
        >
          <el-select
            style="width: 100%"
            v-model="form.manager"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="opt in managerList"
              :key="opt.id"
              :label="opt.username"
              :value="opt.id"
            ></el-option> </el-select
          >=={{ form.manager }}
        </el-form-item>
        <el-form-item
          label="部门介绍"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input type="textarea" v-model="form.introduce"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 添加部门对话框 -->
  </div>
</template>
<script>
import { getDepartments, delDepartment } from "@/api/departments";

import depDia from "./components/depDia.vue";

import { toDo, toDo2 } from "@/utils/";
export default {
  components: { depDia },
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      /* 添加部门对话框 */
      dialogFormVisible: false,
      pid: "",
      row: {},
      isEdit: false,
    };
  },
  created() {
    this.getDepart();
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data);
    },
    async getDepart() {
      const res = await getDepartments();
      // console.log(res);
      // this.tableData = res.data.depts;
      this.tableData = toDo2(res.data.depts);
    },
    /* 点击添加部门按钮 */
    addDep(id) {
      /*
      步骤分析：
      1-点击添加部门按钮
      2-显示对话框
      3-对话框中表单布局
      4-表单校验
      5-收集表单数据  v-model
      6-【取消】关闭对话框+清空表单
      7-展示部门负责人
      8-【确认】关闭对话框+清空表单
        8-0 兜底校验
        8-1 封装api接口函数
        8-2 调用api接口函数
        8-3 成功后需要刷新页面
      9-添加非一级
        获取点击当前行的id
      */
      this.dialogFormVisible = true;
      // 9-添加非一级
      // this.form.pid = id;
      this.pid = id;

      this.isEdit = false;
    },

    /* 点击删除部门按钮 */
    async delDep(id) {
      /* 
      步骤分析：
      1-给按钮绑定点击事件
      2-显示弹出窗
      3-点击取消===关闭对话框===不用写
      4-点击确认按钮
        4-1 ===获取点击当前行的id
        4-2 ===封装api接口函数
        4-3 ===调用接口函数
        4-4 ===关闭对话框 ===不用写
        4-5 刷新页面
      */
      /* 方法1： */
      // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     // 点击的是确认按钮
      //     // alert(id);
      //     await delDepartment(id);
      //     // 刷新页面
      //     this.getDepart();
      //     // 成功的提示
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //   })
      //   .catch(() => {
      //     // 点击的是取消按钮
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
      /* 方法2： */
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // console.log(res, 8);
      if (res === "confirm") {
        // 表示点击的是确认按钮
        await delDepartment(id);
        // 刷新页面
        this.getDepart();
        // 成功的提示
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }
    },
    /* 子向父传值 */
    handleDia() {
      // 相当于点击的取消按钮  cancel函数  关闭对话框+刷新页面
      this.dialogFormVisible = false;
      this.getDepart();
    },
    /* 点击编辑按钮 */
    editDia(row) {
      /* 
      步骤分析：
      1-点击编辑按钮显示对话框=====跟添加的对话框公用一个
      2-显示表单数据
        2-1 需要做标记  isEdit:false
        2-2 点击编辑按钮  isEdit：true,添加按钮 isEdit:false
        2-3 需要将isEdit 传到子组件对话框中
        2-4 子组件对话框 根据 isEdit===true 表单需要显示数据，否则不显示数据
          2-4-1 需要在父组件中获取当前点击行的数据,并传给子组件对话框
          2-4-2 子组件：根据isEdit===true=>将传过来的数据赋值给form表单对象
      3-显示对话框标题
      4-点击对话框确认按钮
        需要将isEdit：true ===发生修改的请求
        isEdit：false ===发生添加的请求
      */
      // 1-点击编辑按钮显示对话框=====跟添加的对话框公用一个
      this.dialogFormVisible = true;
      this.isEdit = true;
      this.row = row;
      // this.pid = row.pid;
      // console.log(row, 88);
    },
  },
};
</script>
<style lang="scss" scoped>
/* 
穿透
less /deep/
scss ::v-deep
*/
.depart-container {
  padding: 20px;
  ::v-deep .el-card__body {
    padding: 80px;
  }
  .el-row {
    width: 100%;
  }
}
</style>
